<template>
    <div class="userinfo"
         @touchstart="touchStart($event)"
         @touchmove="touchMove($event)"
         @touchend="touchEnd($event)"
    >
        <img :src="headerImg" alt="" class="cover">
        <div class="container" ref="container" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)'}">
            <div class="usercontainer"></div>
            <ul class="tabcontainer">
                <li @click="tabChange(1)">TA的技能</li>
                <li @click="tabChange(2)">TA的轻学习</li>
                <li @click="tabChange(3)">TA的动态</li>
            </ul>
            <study :userId="userId" v-if="this.flag === 1"></study>
            <work :userId="userId" v-if="this.flag === 2"></work>
        </div>
    </div>
</template>

<script>
    // import {isLogin} from '@/auth/authService';
    import study from './study';
    import work from './work';
    import headerImg from '../images/show2.png';

    export default {
        name: 'userinfo',
        data() {
            return {
                headerImg,
                flag: 1,
                top: 0,
                startX: 0,
                userId: undefined
            };
        },
        created() {
            // if (isLogin() && this.CONF.user && this.CONF.user.id === this.$route.query.id) {
            //
            // }
            this.userId = this.$route.query.id;
        },
        components: {
            study,
            work
        },
        beforeRouteEnter() {

        },
        methods: {
            tabChange(num) {
                this.flag = num;
            },
            touchStart(e) {
                this.startY = e.targetTouches[0].pageY;
                this.startX = e.targetTouches[0].pageX;
            },
            touchMove(e) {
                const diff = e.targetTouches[0].pageY - this.startY;
                this.top = (diff ** 0.7);
                if (this.top > 100) {
                    this.top = 100;
                }
            },
            touchEnd() {
                this.top = 0;
            }
        }
    };
</script>

<style lang="scss">
    .userinfo {
        .cover {
            width: 100vw;
            min-height: 200px;
            margin: 0;
            padding: 0;
            z-index: -200;
        }
        .container {
            position: absolute;
            top: 30vw;
            width: 100vw;
            background: #fff;
            z-index: 999;
        }
    }
</style>
